<template>
    <div class="m-con">
        <div class="u-title">报名情况</div>
        <div class="rank_box" v-for="(item,index) in classList" :key="index">
            <div class="bg_box">
                <div class="rank_title">
                    <div class="grade">{{item.sstClassName}}</div> 
                    <div class="stateTot" :class="['stateTot',{'_act':item.state == 1}]" @click="clickWarn(item)">
                        <span>{{item.state == 1?"报名提醒":"已全部报名"}}</span>
                    </div>
                </div>
                <div class="txtbox">
                    <div class="txt_r">姓名 </div> 
                    <div class="txt_r">报名状态 </div>
                </div>
                <div class="rank_list">
                    <div v-for="(rank,rankind) in item.stuList" :key="rankind">
                        <div class="rank" v-if="item.show || (!item.show && rankind < 10)">
                            <div class="rank_img">
                                <img :src="rank.userAvatar?rank.userAvatar:headError" :onerror="headError">
                            </div>
                            <div class="rank_name">{{rank.sstUserTruename}}</div>
                            <div :class="['rank_status',{'unSign':rank.isEnroll==1}]">{{rank.isEnroll==1?'已报名':'未报名'}}</div>
                        </div>
                    </div>
                </div>
                <div class="u-collapseBtn" @click="clickCollapse(item)" v-if="item.stuList.length>10">
                    <span>{{item.show?'收起全部':'查看全部'}}</span>
                </div>
            </div>
        </div>
        
        <div class="mask" v-if="mask"></div>
        <Layer :visible="EnableShow" @change="changeLayer"> 
            <h3 slot="title">未报名名单复制成功</h3>
            <p class="u-tips" slot="tips">老师可以前往班级微信或钉钉群<br>粘贴名单提醒学生报名哦</p>
            <div slot="sureBtn" class="u-btn" @click="clickSure">确定</div>
        </Layer>
    </div>
</template>
<script>
import * as api from '@/api/index';
export default {
	name: 'singup',
    data () {
        return {
            classList:[],
            headError: this.$store.state.headError,
            EnableShow: false,
            mask: false
        }
    },
    computed: {
        
    },
    watch:{
        mask(val){
            this.$store.dispatch("setMaskAct",val);
        },
    },
    created(){
        this.getInit()
    },
    methods: {
        getInit(){
            this.classList = this.$parent.userInfo.classList?this.$parent.userInfo.classList:[]
            this.classList.forEach(item => {
                this.$set(item, 'show', false);
                this.$set(item, 'state', 0);
                this.$set(item, 'stuList', []);
                this.$set(item, 'noEnrollstu', "");
                this.getEnrollListByCLassId(item.classId,item)
            })
        },
        /*****
		 * 按照班级编号获取报名信息列表
		 * isEnroll:1 是报名 
         * state: 0 全部报名 
         * noEnrollList: 未报名学生名单
		 * ****/ 
        async getEnrollListByCLassId(classId,item){
            var data = {
                classId: classId,
                futureId: this.$parent.userInfo.futureId,
            }
            var res = await api.getEnrollListByCLassId(data)
            if(res.resultCode == 1){
                var list = res.value&&res.value.length>0?res.value:[],
                    state = 0, noEnrollList = [], noEnroll = []
                list.forEach(cur => {
                    if(cur.isEnroll != 1){
                        state = 1;
                        noEnrollList.push(cur)
                        return false;
                    }
                })
                noEnroll = noEnrollList.map(({sstUserTruename})=>sstUserTruename)

                item.state = state
                item.stuList = list
                item.noEnrollstu = noEnroll.join()
            }
        },

        clickCollapse(item){
            item.show = !item.show
        },
        clickWarn(item){
            if(item.state == 1){
                var copyTxt=item.noEnrollstu
                var oInput = document.createElement('input');
                oInput.value = copyTxt;
                document.body.appendChild(oInput)
                oInput.select()
                document.execCommand('copy')
                document.body.removeChild(oInput)
                this.EnableShow = this.mask = true
            }
        },
        changeLayer(data){
            this.EnableShow = this.mask = data.visible
        },
        clickSure(){
            this.EnableShow = this.mask = false

        },
    }
}
</script>
